<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="cus-el-dialog">
    <el-dialog v-model="visible" v-bind="$attrs" :fullscreen="props.isFull" :close-on-click-modal="false">
      <slot />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
const props = defineProps<{
  isFull: boolean;
}>();
const visible = defineModel<boolean>();
onMounted(() => {
  console.log('visible', visible);
});
</script>

<style scoped lang="less">
.cus-el-dialog {
  :deep(.el-overlay) {
    position: absolute;

    .el-overlay-dialog {
      position: absolute;
    }

    .el-dialog.is-fullscreen {
      border-radius: 0;

      .el-dialog__header {
        border-bottom: 0;
        background-color: #ffffff;

        .el-dialog__title {
          font-size: 16px;
          color: #303133;
        }
      }

      .el-dialog__body {
        padding: 0 20px;
      }
    }
  }
}
</style>
